<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-05-11 22:32:09
-->

<template>
  <div class="bottom-view">
    <el-row :gutter="20">
      <el-col class="view" :lg="12" :md="24">
        <el-card shadow="hover">
          <template v-slot:header>
            <div class="title-wrapper">关键词搜索</div>
          </template>
          <template>
            <div class="chart-wrapper">
              <div class="chart-inner">
                <div class="chart">
                  <div class="chart-title">搜索用户数</div>
                  <div class="chart-data">93,634</div>
                  <v-chart :options="searchUserOptions" :autoresize="true"/>
                </div>
                <div class="chart">
                  <div class="chart-title">搜索量</div>
                  <div class="chart-data">198,782</div>
                  <v-chart :options="searchNumOptions" :autoresize="true"/>
                </div>
              </div>
              <div class="table-wrapper">
                <el-table :data="tableData">
                  <el-table-column prop="rank" label="排名" width="180" />
                  <el-table-column prop="keyword" label="关键词" width="180" />
                  <el-table-column prop="count" label="总搜索量" />
                  <el-table-column prop="users" label="搜索用户数" />
                </el-table>
                <el-pagination layout="prev, pager, next" :total="100"
                    :page-size="4" background @current-change="onPageChange" />
              </div>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col class="view" :lg="12" :md="24">
        <el-card shadow="hover">
          <template v-slot:header>
            <div class="title-wrapper">
              <div class="title">分类销售排行</div>
              <div class="radio-wrapper">
                <el-radio-group v-model="radioSelect" size="small">
                  <el-radio-button label="品类"></el-radio-button>
                  <el-radio-button label="商品"></el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <template>
            <div class="chart-wrapper">
              <v-chart :options="categoryOptions" :autoresize="true" />
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BottomView',
  data () {
    return {
      searchUserOptions: {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: [100, 150, 200, 250, 200, 150, 100, 50, 100, 150],
          areaStyle: {
            color: 'rgba(95, 187, 255, .5)'
          },
          lineStyle: {
            color: 'rgba(95, 187, 255)'
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }
      },
      searchNumOptions: {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: [100, 150, 200, 250, 200, 150, 100, 50, 100, 150],
          areaStyle: {
            color: 'rgba(95, 187, 255, .5)'
          },
          lineStyle: {
            color: 'rgba(95, 187, 255)'
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }
      },
      tableData: [
        { id: 1, rank: 1, keyword: '北京', count: 100, users: 90, range: '90%' },
        { id: 2, rank: 2, keyword: '北京', count: 100, users: 90, range: '90%' },
        { id: 3, rank: 3, keyword: '北京', count: 100, users: 90, range: '90%' },
        { id: 4, rank: 4, keyword: '北京', count: 100, users: 90, range: '90%' }
      ],
      radioSelect: '品类',
      categoryOptions: {}
    }
  },
  mounted () {
    this.renderPieChart()
  },
  methods: {
    onPageChange (page) {
      console.log(page)
    },
    renderPieChart () {
      const mockData = [{
        name: '粥粉汤面 | 15.40%', // legend 显示文字
        legendName: '粥粉汤面',
        value: 67,
        percent: '15.40',
        itemStyle: {
          color: '#e7e702'
        }
      }, {
        name: '简餐便当 | 22.30%',
        legendName: '简餐便当',
        value: 97,
        percent: '22.30',
        itemStyle: {
          color: '#8d7fec'
        }
      }, {
        name: '汉堡披萨 | 21.15%',
        legendName: '汉堡披萨',
        value: 92,
        percent: '21.15',
        itemStyle: {
          color: '#5085f2'
        }
      }]
      this.categoryOptions = {
        title: [{ // 标题1，左上角
          text: '品类分布',
          textStyle: {
            fontSize: 14,
            color: '#666'
          },
          left: 20,
          top: 20
        }, { // 标题2: 圆心处的主副标题
          text: '累计订单量',
          subtext: '320',
          x: '34.0%',
          y: '42.5%',
          textAlign: 'center',
          textStyle: {
            fontSize: 14,
            color: '#999'
          },
          subtextStyle: {
            fontSize: 28,
            color: '#333'
          }
        }],
        series: [{
          name: '品类分布',
          type: 'pie',
          data: mockData,
          label: { // 不加不显示文字
            show: true,
            position: 'outter',
            formatter: function (params) {
              return params.data.legendName
            }
          },
          center: ['35%', '50%'], // 圆心位置, 给右边留点空隙放legend
          radius: ['45%', '60%'], // 内外半径长度，造成空心效果
          labelLine: {
            normal: {
              length: 5, // label旁边的2条短线定制
              length2: 3,
              smooth: true
            }
          },
          clockwise: false, // 数据是否顺时钟排列
          itemStyle: {
            borderWidth: 4,
            borderColor: '#fff '
          }
        }],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 200, // 大概显示5条，超出滚动
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item', // 默认，移动到item的时候触发显示
          formatter: function (params) {
            return params.seriesName + '<br/>' +
            params.marker + params.data.legendName + '<br/>' +
            '数量：' + params.data.value + '<br/>' +
            '占比：' + params.data.percent + '%'
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  margin-top: 20px;

  .view {
    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;

      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;

        .chart {
          flex: 1;
          width: 50%;
          padding: 0 10px;

          .chart-title {
            color: #999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
            margin-top: 5px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-top: 15px;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
